Searchable Listview

  • Steps

    in controller

    Define variables
    
    
                          final List<Map<String, dynamic>> allPlayers = [
                            {"name": "Rohit Sharma", "country": "India"},
                            {"name": "Virat Kohli ", "country": "India"},
                            {"name": "Glenn Maxwell", "country": "Australia"},
                            {"name": "Aaron Finch", "country": "Australia"},
                            {"name": "Martin Guptill", "country": "New Zealand"},
                            {"name": "Trent Boult", "country": "New Zealand"},
                            {"name": "David Miller", "country": "South Africa"},
                            {"name": "Kagiso Rabada", "country": "South Africa"},
                            {"name": "Chris Gayle", "country": "West Indies"},
                            {"name": "Jason Holder", "country": "West Indies"},
                          ];
                          Rx<List<Map<String, dynamic>>> foundPlayers =
                          Rx<List<Map<String, dynamic>>>([]);
    
                        
    Function
    
    
                        @override
      void onInit() {
        super.onInit();
        foundPlayers.value = allPlayers;
      }
    
      @override
      void onReady() {
        super.onReady();
      }
    
      @override
      void onClose() {}
      void filterPlayer(String playerName) {
        List<Map<String, dynamic>> results = [];
        if (playerName.isEmpty) {
          results = allPlayers;
        } else {
          results = allPlayers
              .where((element) => element["name"]
              .toString()
              .toLowerCase()
              .contains(playerName.toLowerCase()))
              .toList();
        }
        foundPlayers.value = results;
      }
    
    
    Complete code
    
    
    import 'package:get/get.dart';
    
    import 'dart:convert';
    import 'package:http/http.dart' as http;
    import 'package:vera/models/user_model.dart';
    
    
    
    
    class FilterController extends GetxController {
    
      final List<Map<String, dynamic>> allPlayers = [
        {"name": "Rohit Sharma", "country": "India"},
        {"name": "Virat Kohli ", "country": "India"},
        {"name": "Glenn Maxwell", "country": "Australia"},
        {"name": "Aaron Finch", "country": "Australia"},
        {"name": "Martin Guptill", "country": "New Zealand"},
        {"name": "Trent Boult", "country": "New Zealand"},
        {"name": "David Miller", "country": "South Africa"},
        {"name": "Kagiso Rabada", "country": "South Africa"},
        {"name": "Chris Gayle", "country": "West Indies"},
        {"name": "Jason Holder", "country": "West Indies"},
      ];
      Rx<List<Map<String, dynamic>>> foundPlayers =
      Rx<List<Map<String, dynamic>>>([]);
    
      @override
      void onInit() {
        super.onInit();
        foundPlayers.value = allPlayers;
      }
    
      @override
      void onReady() {
        super.onReady();
      }
    
      @override
      void onClose() {}
      void filterPlayer(String playerName) {
        List<Map<String, dynamic>> results = [];
        if (playerName.isEmpty) {
          results = allPlayers;
        } else {
          results = allPlayers
              .where((element) => element["name"]
              .toString()
              .toLowerCase()
              .contains(playerName.toLowerCase()))
              .toList();
        }
        foundPlayers.value = results;
      }
    
    
    }
    
    

    in view

    Serach panel
    
    
            Padding(
              padding: const EdgeInsets.all(25),
              child: TextField(
                onChanged: (value) => controller.filterPlayer(value),
                decoration: const InputDecoration(
                  labelText: 'Search',
                  suffixIcon: Icon(Icons.search),
                ),
              ),
            ),
    
          
    Listview
    
    
    Expanded(
                        child: Obx(
                              () => ListView.builder(
                            itemCount: controller.foundPlayers.value.length,
                            itemBuilder: (context, index) => ListTile(
                              title: Text(
                                controller.foundPlayers.value[index]['name'],
                                style:
                                TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                              ),
                              subtitle:
                              Text(controller.foundPlayers.value[index]['country']),
                            ),
                          ),
                        ),
                      ),
    
                    
    Complete code
    
    
                    import 'package:flutter/material.dart';
    import 'package:vera/controllers/filter_controller.dart';
    import 'package:get/get.dart';
    import 'package:vera/models/user_model.dart';
    import 'package:vera/widgets/bottom_nav.dart';
    
    class LoginPage extends StatelessWidget {
      @override
    
      final FilterController controller = Get.put(FilterController());
    
      
    
      Widget build(BuildContext context) {
        //List<UserModel> userList = controller.userList;
    
    
        return GetBuilder<FilterController>(
            builder: (controller) => Scaffold(
    
                body: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
    
                      Padding(
                        padding: const EdgeInsets.all(25),
                        child: TextField(
                          onChanged: (value) => controller.filterPlayer(value),
                          decoration: const InputDecoration(
                            labelText: 'Search',
                            suffixIcon: Icon(Icons.search),
                          ),
                        ),
                      ),
    
    
    
                      Expanded(
                        child: Obx(
                              () => ListView.builder(
                            itemCount: controller.foundPlayers.value.length,
                            itemBuilder: (context, index) => ListTile(
                              title: Text(
                                controller.foundPlayers.value[index]['name'],
                                style:
                                TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                              ),
                              subtitle:
                              Text(controller.foundPlayers.value[index]['country']),
                            ),
                          ),
                        ),
                      ),
    
                 
                  
                    ],
                  ),
                ),
              //bottomNavigationBar:BottomNavBar()
    
            )
        );
      }
    }